<!-- computed:作用：可以依赖一个（多）值衍生（派生）出一个新值。 -->
<!-- 特点： -->
<!-- 1. 依赖的值变化了，会重新计算出一个新值 -->
<!-- 2. 具有缓存效果。计算属性在模板使用多次，其只会执行一次。 -->
<!-- 注意：computed中不能发送异步请求。即不能有副作用 -->
 <template>
    <div>{{ count }}</div>
    <div>{{ doubleCount }}</div>
    <button @click="countAdd">+</button>
    <div>{{ firstUp }}</div>
    <div>{{ evenNumbers }}</div>
    <button @click="numbersAdd">添加数字</button>
 </template>
 
 <script setup>
import { ref, computed } from 'vue'
 const count = ref(0)
 const countAdd = () => {
    count.value++
 }
 const doubleCount = computed(() => {
    return count.value * 2
 })
 const arr = ref('aBcDeFg')
 const firstUp = computed(() => {
    return arr.value.charAt(0).toUpperCase() + arr.value.substring(1).toLowerCase()
 })
 const numbers = ref([1,2,3,4,5,6,7,8,9])
 const evenNumbers = computed(() => {
    return numbers.value.filter(item => item % 2 === 0)
 })
 const numbersAdd = () => {
    numbers.value.push(10,11,12,13,14)
 }
 </script>